/* eslint-disable */
<template>
  <div class="editNodeBox">
    <el-select
      placeholder="选择或搜索节点"
      v-model="editNodeModel.value"
      value="value"
      @change="editNodeShow"
      size="mini"
      filterable
    >
      <el-option
        v-for="item in nodesArr"
        :key="item.uuid"
        :label="item.uuid + ' ' + item.label"
        :value="item.uuid"
      >
      </el-option>
    </el-select>
    <div class="row">
      <el-select
        placeholder="选择或搜索类型"
        v-model="editNodeModel.typeId"
        value="value"
        size="mini"
        :disabled="editNodeModel.id==''"
        filterable
      >
        <el-option
          v-for="item in typeArr"
          :key="item.id"
          :label="item.id + ' ' + item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row">
      <input class="input" v-model="editNodeModel.nodeAtId" placeholder="节点URI" />
    </div>
    <div class="row">
      <input class="input" v-model="editNodeModel.label_ZH" placeholder="节点标签" />
    </div>
<!--    <div class="row">-->
<!--      <input v-model="editNodeModel.node_type" placeholder="节点类型" />-->
<!--    </div>-->
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantFixNode"
        >修改</el-button
      >
    </div>
    <div class="row">
      <el-button
        class="el-button"
        type="danger"
        plain
        size="mini"
        v-on:click="wantDeleteNode"
        >删除</el-button
      >
    </div>
  </div>
</template>

<script>
import { deleteNodeAPI, editNodeAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "editNodeComponent",
  data() {
    return {
      editNodeModel: {
        value: "", //用于表单控件展示
        id: "",
        nodeAtId: "",
        label_ZH: "",
        typeId: null,
        running: false
      },
      // KgEditor父组件在两层el组件外
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      nodesArr: [],
      typeArr: []
    };
  },
  created() {
    this.nodesArr = this.KG.kgInfo.visibleNodes;
    this.typeArr = this.KG.kgInfo.typeList;
  },
  watch:{
    "KG.update.nodes": {
      handler:function() {
        this.nodesArr = null;
        this.nodesArr = this.KG.kgInfo.visibleNodes;
      },
      deep:true
    },
    "KG.update.typeList": {
      handler:function() {
        this.typeArr = null;
        this.typeArr = this.KG.kgInfo.typeList;
      },
      deep:true
    }
  },
  methods: {
    /**
     * --- fix node function ---
     */
    //选择修改某个节点时显示其信息
    editNodeShow(id) {
      let node = this.KG.getNodeById(Number(id));
      if (node == null) {
        this.$message.error("找不到节点实体,请刷新页面或重新加载数据");
      } else {
        this.editNodeModel.id = node.uuid;
        this.editNodeModel.nodeAtId = node.uri;
        this.editNodeModel.label_ZH = node.label;
        this.editNodeModel.typeId = node.type.id;
        this.KG.zoomToNode(this.editNodeModel.id);
      }
    },
    wantFixNode() {
      let _this = this;
      // --- 检查是否选择节点
      if (this.editNodeModel.id == "") {
        this.$message.info("请先选择要编辑的节点");
        return;
      }
      let originalNode = this.KG.getNodeById(Number(this.editNodeModel.id));
      let fixMessage = "";

      // --- 检查URI是否改变
      if(this.editNodeModel.nodeAtId != "" && this.editNodeModel.nodeAtId != originalNode.uri){
        fixMessage += '<div><b>URI:</b> "' + originalNode.uri + '"->"' + this.editNodeModel.nodeAtId + '";</div>';
      }
      else _this.editNodeModel.nodeAtId = originalNode.uri;

      // --- 检查标签是否改变
      if(this.editNodeModel.label_ZH != "" && this.editNodeModel.label_ZH != originalNode.label){
        fixMessage += '<div><b>标签:</b> "' + originalNode.label + '"->"' + this.editNodeModel.label_ZH + '";</div>';
      }
      else _this.editNodeModel.label_ZH = originalNode.label;

      // --- 检查类型是否改变
      if(this.editNodeModel.typeId != null && this.editNodeModel.typeId != originalNode.type.id){
        let newType = this.KG.getTypeById(this.editNodeModel.typeId);
        fixMessage += '<div><b>类型:</b> "' + originalNode.type.name + '"->"' + newType.name + '";</div>';
      }
      else _this.editNodeModel.typeId = originalNode.type.id;

      // --- 检查是否有任何改变
      if (fixMessage == "") {
        this.$message.warning("没有做任何修改");
        return;
      }

      if (this.editNodeModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }

      this.$confirm(fixMessage + "做出以上修改,是否继续?", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.editNode(originalNode);
      });
    },
    editNode(originalNode) {
      let _this = this;
      this.editNodeModel.running = true;
      editNodeAPI(
        {
          id: this.editNodeModel.id,
          nodeAtId: this.editNodeModel.nodeAtId,
          label_ZH: this.editNodeModel.label_ZH,
          type_id: this.editNodeModel.typeId,
          color: originalNode.selfColor?originalNode.selfColor:"",
          radius: originalNode.selfR?originalNode.selfR:-1,
          kgID: this.KG.kgInfo.id
        },
        function() {
          _this.KG.editNode(
            _this.editNodeModel.id,
            _this.editNodeModel.nodeAtId,
            _this.editNodeModel.label_ZH,
            _this.editNodeModel.typeId,
            originalNode.color,
            originalNode.r
          );
          _this.$message.success("修改节点成功");
        },
        function(error) {
          _this.$message.error("修改节点失败" + error);
        },()=>{
          _this.editNodeModel.running = false;

        }
      );
    },
    /**
     * --- delete node function ---
     */
    wantDeleteNode() {
      let _this = this;
      if (this.editNodeModel.id == "") {
        this.$message.info("请先选择要删除的节点");
        return;
      }
      if (this.editNodeModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.$confirm("这将导致与其相关的连接全部被删除,确定要删除当前节点?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.deleteNode();
      });
    },
    deleteNode() {
      let _this = this;
      this.editNodeModel.running = true;
      deleteNodeAPI(
        {
          id: this.editNodeModel.id,
          kgID: this.KG.kgInfo.id
        },
        function() {
          _this.KG.deleteNodeById(Number(_this.editNodeModel.id));
          _this.editNodeModel.id = "";
          _this.editNodeModel.value = "";
          _this.editNodeModel.nodeAtId = "";
          _this.editNodeModel.label_ZH = "";
          _this.editNodeModel.node_type = "";
          _this.editNodeModel.running = false;
          _this.$message.success("删除节点成功");
        },
        function(error) {
          _this.editNodeModel.running = false;
          _this.$message.error("删除节点失败" + error);
        }
      );
    },
  }
};
</script>

<style scoped>
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
